<template>
	<view class="container">
		<view class="long-data">
			<view class="long-data-title long-data-fl">选择时间</view>
			<view class="long-data-changeTime long-data-fr" @tap="tapIsShow">
				{{ hour }}:{{ minute }}
				<view v-if="showCheck" class="long-data-check">{{ checkStr }}</view>
			</view>
		</view>
		<view class="long-data-picker" :style="'display:' + [isShow ? 'block' : 'none']">
			<picker-view :indicator-style="indicatorStyle" :value="timeValues" @change="bindTimeChange">
				<picker-view-column>
					<view class="long-datetime-item" v-for="(item, index) in timeObj.hours" :key="index">{{ item }}时</view>
				</picker-view-column>
				<picker-view-column>
					<view class="long-datetime-item" v-for="(item, index) in timeObj.minutes" :key="index">{{ item }}分</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "long-date",
		props: {
			openStatus: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			let currentTime = new Date();
			let h = currentTime.getHours();
			let m = currentTime.getMinutes();

			let hour = h < 10 ? '0' + h : h;
			let minute = m < 10 ? '0' + m : m;

			let hours = [];
			let minutes = [];

			for (let i = 0; i < 24; i++) {
				let str = i < 10 ? '0' + i : '' + i;
				hours.push(str);
			}

			for (let i = 0; i < 60; i++) {
				let str = i < 10 ? '0' + i : '' + i;
				minutes.push(str);
			}

			let timeObj = {
				hours,
				minutes,
			};

			return {
				hour,
				minute,
				timeObj,
				isShow: this.openStatus,
				 indicatorStyle: `height: ${uni.upx2px(88)}px; line-height: ${uni.upx2px(88)}px; color: #007aff;`,
				// itemHeight: `height: ${uni.upx2px(88)}px;`,
				timeValues: [h, m],
				showCheck: false,
				checkStr: '',
			};
		},
		methods: {
			tapIsShow() {
				this.isShow = !this.isShow;
			},
			bindTimeChange(e) {
				let valueArr = e.detail.value;

				let hourStr = this.timeObj.hours[valueArr[0]];
				let minuteStr = this.timeObj.minutes[valueArr[1]];

				this.hour = hourStr;
				this.minute = minuteStr;

				let currentTime = new Date();
				let chooesTime = new Date();
				chooesTime.setHours(hourStr);
				chooesTime.setMinutes(minuteStr);

				// if (chooesTime < currentTime) {
				// 	this.checkStr = '时间不能小于当前时间';
				// 	this.showCheck = true;
				// } else {
					this.checkStr = '';
					this.showCheck = false;
				// }

				this.$emit("select", {
					time: `${this.hour}:${this.minute}`,
				});
			},
		},
	};
</script>

<style>
	.container{
		border-radius: 180px;
	}
	.long-data {
		margin-top: 30rpx;
		height: 80rpx;
		background: #FFFFFF;
		line-height: 80rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #eee;
	}
	.long-data-check {
		height: 60rpx;
		width: 80%;
		background: #e54d42;
		position: absolute;
		left: 0;
		top: 18rpx;
		color: #fff;
		line-height: 45rpx;
		padding: 0px 20rpx;
		font-size: 20rpx;
		text-align: center;
		border-radius: 20rpx;
	}
	.long-data-fl {
		margin-left: 12rpx ;
		font-size: 15px;
		float: left;
	}
	.long-data-fr {
		float: right;
	}
	.long-data-changeTime {
		color: #888;
		font-size: 25rpx;
		position: relative;
		text-align: right;
		padding: 0rpx 20rpx;
	}
	.long-data-picker {
		width: 100%;
		height: 380rpx;
		overflow: hidden;
		background: #fff;
		transition: height 0.3s;
	}
	.long-datetime-item {
		text-align: center;
		width: 100%;
		height: 80upx;
		line-height: 90upx;
		font-size: 30upx;
	}
	.long-data-picker picker-view {
		height: 100%;
	}
</style>
